<template>
  <!-- 面包屑 -->
  <div>
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>我的</el-breadcrumb-item>
      <el-breadcrumb-item>个人信息</el-breadcrumb-item>
      <el-breadcrumb-item><b>直系亲属</b></el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <div >
    <el-button class="custom-link" style="font-size: large;margin: 20px" @click="Cparents">家庭主要成员</el-button>
    <el-button class="custom-link" style="font-size: large;margin: 20px" @click="Cabroad">出国</el-button>
    <el-button class="custom-link" style="font-size: large;margin: 20px" @click="Ccareer">亲属职业</el-button>
    <el-button class="custom-link" style="font-size: large;margin: 20px" @click="Cmigrate">移居</el-button>
    <el-button class="custom-link" style="font-size: large;margin: 20px" @click="Ccriminal">刑事责任</el-button>
  </div>
  <div style="margin:20px">
    <el-row :gutter="10" class="mb8" >
      <el-col :span="1.5" v-show="parbutton">
        <el-button
            type="primary"
            plain
            @click="handleAdd"
        ><el-icon><Plus /></el-icon>新增</el-button>
      </el-col>
      <el-col :span="1.5" v-show="abrbutton">
        <el-button
            type="primary"
            plain
            @click="abrhandleAdd"
        ><el-icon><Plus /></el-icon>新增</el-button>
      </el-col>
      <el-col :span="1.5" v-show="carbutton">
        <el-button
            type="primary"
            plain
            @click="carhandleAdd"
        ><el-icon><Plus /></el-icon>新增</el-button>
      </el-col>
      <el-col :span="1.5" v-show="migbutton">
        <el-button
            type="primary"
            plain
            @click="mighandleAdd"
        ><el-icon><Plus /></el-icon>新增</el-button>
      </el-col>
      <el-col :span="1.5" v-show="resbutton">
        <el-button
            type="primary"
            plain
            @click="reshandleAdd"
        ><el-icon><Plus /></el-icon>新增</el-button>
      </el-col>
    </el-row>
  <el-table :data="parents" v-show="parentsTable">
    <el-table-column label="亲属姓名" align="center" prop="name" />
    <el-table-column label="与本人的关系" align="center" prop="relationship" />
    <el-table-column label="是否与子女共同生活" align="center" prop="isLive" />
    <el-table-column label="婚姻状况" align="center" prop="marriage" />
    <el-table-column label="工作" align="center" prop="unit" />
    <el-table-column label="现任职务" align="center" prop="duties" />
    <el-table-column label="单位性质" align="center" prop="unitNature" />
    <el-table-column label="是否担任高级职务" align="center" prop="isSenior" />
    <el-table-column label="是否在国" align="center" prop="isAbroad" />
    <el-table-column label="身份证号" align="center" prop="identity" />
    <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
      <template #default="scope">
        <el-button size="small"  @click="handleUpdate(scope.row)">
          <el-icon><Edit /></el-icon>修改</el-button>
        <el-button  size="small" type="danger"  @click="handleDelete(scope.row)">
          <el-icon><Delete /></el-icon>删除</el-button>
      </template>
    </el-table-column>
  </el-table>
    <el-table :data="abroadList" v-show="abroadTable">
      <el-table-column label="亲属姓名" align="center" prop="name" />
      <el-table-column label="与本人的关系" align="center" prop="relationship" />
      <el-table-column label="身份证号" align="center" prop="identity" />
      <el-table-column label="所在国家" align="center" prop="country" />
      <el-table-column label="工作生活城市" align="center" prop="workCity" />
      <el-table-column label="工作" align="center" prop="work" />
      <el-table-column label="职务" align="center" prop="duties" />
      <el-table-column label="起始日期" align="center" prop="startingTime" width="180">
<!--        <template #default="scope">
          <span>{{ parseTime(scope.row.startingTime, '{y}-{m}-{d}') }}</span>
        </template>-->
      </el-table-column>
      <el-table-column label="返回日期" align="center" prop="endTime" width="180">
<!--        <template #default="scope">
          <span>{{ parseTime(scope.row.endTime, '{y}-{m}-{d}') }}</span>
        </template>-->
      </el-table-column>
      <el-table-column label="备注" align="center" prop="notes" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button size="small"   @click="AbrhandleUpdate(scope.row)">
            <el-icon><Edit /></el-icon>修改</el-button>
          <el-button size="small" type="danger"  @click="AbrhandleDelete(scope.row)">
            <el-icon><Delete /></el-icon>删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-table :data="careerList" v-show="careerTable">
      <el-table-column label="亲属姓名" align="center" prop="name" />
      <el-table-column label="与本人的关系" align="center" prop="relationship" />
      <el-table-column label="身份证号" align="center" prop="identity" />
      <el-table-column label="职务" align="center" prop="duties" />
      <el-table-column label="单位名称" align="center" prop="unit" />
      <el-table-column label="是否为单位合伙人或设立人" align="center" prop="isPartner" />
      <el-table-column label="是否在本单位辖区内执业" align="center" prop="isDistrict" />
      <el-table-column label="辖区" align="center" prop="district" />
      <el-table-column label="执业范围" align="center" prop="scope" />
      <el-table-column label="是否提出回避申请" align="center" prop="isApply" />
      <el-table-column label="回避申请的具体情形" align="center" prop="content" />
      <el-table-column label="备注" align="center" prop="notes" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button size="small"  @click="CarhandleUpdate(scope.row)">
            <el-icon><Edit /></el-icon>修改</el-button>
          <el-button size="small" type="danger"  @click="carhandleDelete(scope.row)">
            <el-icon><Delete /></el-icon>删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-table :data="migrateList" v-show="migrateTable">
      <el-table-column label="亲属姓名" align="center" prop="name" />
      <el-table-column label="与本人的关系" align="center" prop="relationship" />
      <el-table-column label="身份证号" align="center" prop="identity" />
      <el-table-column label="移居国家" align="center" prop="country" />
      <el-table-column label="现住城市" align="center" prop="city" />
      <el-table-column label="移居证件号码" align="center" prop="documentNum" />
      <el-table-column label="移居类别" align="center" prop="migrateType" />
      <el-table-column label="移居日期" align="center" prop="migrateDate" width="180">
<!--        <template #default="scope">
          <span>{{ parseTime(scope.row.migrateDate, '{y}-{m}-{d}') }}</span>
        </template>-->
      </el-table-column>
      <el-table-column label="备注" align="center" prop="notes" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button size="small"  @click="mighandleUpdate(scope.row)" >
            <el-icon><Edit /></el-icon>修改</el-button>
          <el-button size="small" type="danger"  @click="mighandleDelete(scope.row)" >
            <el-icon><Delete /></el-icon>删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-table :data="responsibilityList" v-show="responsibilityTable">
      <el-table-column label="亲属姓名" align="center" prop="name" />
      <el-table-column label="与本人的关系" align="center" prop="relationship" />
      <el-table-column label="身份证号" align="center" prop="identity" />
      <el-table-column label="被追究日期" align="center" prop="investigateDate" width="180">
<!--        <template #default="scope">
          <span>{{ parseTime(scope.row.investigateDate, '{y}-{m}-{d}') }}</span>
        </template>-->
      </el-table-column>
      <el-table-column label="被追究原因" align="center" prop="investigateReason" />
      <el-table-column label="处理阶段" align="center" prop="processingStage" />
      <el-table-column label="处理结果" align="center" prop="processingResults" />
      <el-table-column label="备注" align="center" prop="notes" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button size="small"  @click="reshandleUpdate(scope.row)" >
            <el-icon><Edit /></el-icon>修改</el-button>
          <el-button size="small" type="danger"  @click="reshandleDelete(scope.row)" >
            <el-icon><Delete /></el-icon>删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <!-- 添加或修改家庭主要成员对话框 -->
  <el-dialog :title="title" v-model="open" width="600px" append-to-body>
    <el-form ref="parentsRef" :model="form" :rules="rules" label-width="150px">
      <el-form-item label="亲属姓名" prop="name">
        <el-input v-model="form.name" placeholder="请输入亲属姓名" />
      </el-form-item>
      <el-form-item label="与本人关系" prop="relationship">
        <el-select
            v-model="form.relationship"
            placeholder="与本人关系"
            clearable >
          <el-option
              v-for="item in type"
              :key="item.value"
              :label="item.label"
              :value="item.label"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="是否与子女共同生活" prop="isLive">
        <div class="mb-2 ml-4">
          <el-radio-group v-model="form.isLive">
            <el-radio value="是" size="large">是</el-radio>
            <el-radio value="否" size="large">否</el-radio>
          </el-radio-group>
        </div>
      </el-form-item>
      <el-form-item label="婚姻状况" prop="marriage">
        <el-select
            v-model="form.marriage"
            placeholder="婚姻状况"
            clearable >
          <el-option
              v-for="item in marriageType"
              :key="item.value"
              :label="item.label"
              :value="item.label"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="工作" prop="unit">
        <el-input v-model="form.unit" placeholder="请输入工作" />
      </el-form-item>
      <el-form-item label="现任职务" prop="duties">
        <el-input v-model="form.duties" placeholder="请输入现任职务" />
      </el-form-item>
      <el-form-item label="单位性质" prop="unitNature">
        <el-select
            v-model="form.unitNature"
            placeholder="单位性质"
            clearable >
          <el-option
              v-for="item in unitNature"
              :key="item.value"
              :label="item.label"
              :value="item.label"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="是否担任高级职务" prop="isSenior">
        <div class="mb-2 ml-4">
          <el-radio-group v-model="form.isSenior">
            <el-radio value="是" size="large">是</el-radio>
            <el-radio value="否" size="large">否</el-radio>
          </el-radio-group>
        </div>
      </el-form-item>
      <el-form-item label="是否在国（境）外" prop="isAbroad">
        <div class="mb-2 ml-4">
          <el-radio-group v-model="form.isAbroad">
            <el-radio value="是" size="large">是</el-radio>
            <el-radio value="否" size="large">否</el-radio>
          </el-radio-group>
        </div>
      </el-form-item>
      <el-form-item label="身份证号" prop="identity">
        <el-input v-model="form.identity" placeholder="请输入身份证号" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 添加或修改出国对话框 -->
  <el-dialog :title="abrtitle" v-model="abropen" width="600px" append-to-body>
    <el-form ref="abroadRef" :model="abrform" :rules="rules" label-width="110px" >
      <el-form-item label="亲属姓名" prop="name">
        <el-select
            v-model="abrform.name"
            placeholder="亲属姓名"
            clearable >
          <el-option
              v-for="(item,index) in Qinname"
              :key="index"
              :label="item"
              :value="item"
              @click="infoClick(abrform.name)"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="与本人关系" prop="relationship">
        <el-select
            v-model="abrform.relationship"
            placeholder="与本人关系"
            clearable >
          <el-option
              v-for="item in type"
              :key="item.value"
              :label="item.label"
              :value="item.label"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="身份证号" prop="identity">
        <el-input v-model="abrform.identity" placeholder="请输入身份证号" />
      </el-form-item>
      <el-form-item label="所在国家" prop="country">
        <el-input v-model="abrform.country" placeholder="请输入所在国家" />
      </el-form-item>
      <el-form-item label="工作生活城市" prop="workCity">
        <el-input v-model="abrform.workCity" placeholder="请输入工作生活城市" />
      </el-form-item>
      <el-form-item label="工作(学习)" prop="work">
        <el-input v-model="abrform.work" placeholder="请输入工作（学习）单位" />
      </el-form-item>
      <el-form-item label="职务" prop="duties">
        <el-input v-model="abrform.duties" placeholder="请输入职务" />
      </el-form-item>
      <el-form-item label="起始日期" prop="startingTime">
        <el-date-picker clearable
                        v-model="abrform.startingTime"
                        type="date"
                        value-format="YYYY-MM-DD"
                        placeholder="请选择起始日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="返回日期" prop="endTime">
        <el-date-picker clearable
                        v-model="abrform.endTime"
                        type="date"
                        value-format="YYYY-MM-DD"
                        placeholder="请选择返回日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="备注" prop="notes">
        <el-input v-model="abrform.notes" placeholder="请输入备注" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="abrsubmitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 添加或修改亲属从事相关职业对话框 -->
  <el-dialog :title="cartitle" v-model="caropen" width="600px" append-to-body>
    <el-form ref="careerRef" :model="carform" :rules="rules" label-width="150px">
      <el-form-item label="亲属姓名" prop="name">
        <el-select
            v-model="carform.name"
            placeholder="亲属姓名"
            clearable >
          <el-option
              v-for="(item,index) in Qinname"
              :key="index"
              :label="item"
              :value="item"
              @click="infoClick(carform.name)"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="与本人关系" prop="relationship">
        <el-select
            v-model="carform.relationship"
            placeholder="与本人关系"
            clearable >
          <el-option
              v-for="item in type"
              :key="item.value"
              :label="item.label"
              :value="item.label"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="身份证号" prop="identity">
        <el-input v-model="carform.identity" placeholder="请输入身份证号" />
      </el-form-item>
      <el-form-item label="职务" prop="duties">
        <el-input v-model="carform.duties" placeholder="请输入职务" />
      </el-form-item>
      <el-form-item label="单位名称" prop="unit">
        <el-input v-model="carform.unit" placeholder="请输入单位名称" />
      </el-form-item>
      <el-form-item label="是否为单位合伙人或设立人" prop="isPartner">
        <div class="mb-2 ml-4">
          <el-radio-group v-model="carform.isPartner">
            <el-radio value="是" size="large">是</el-radio>
            <el-radio value="否" size="large">否</el-radio>
          </el-radio-group>
        </div>
      </el-form-item>
      <el-form-item label="是否为本单位辖区内执业" prop="isDistrict">
        <div class="mb-2 ml-4">
          <el-radio-group v-model="carform.isDistrict">
            <el-radio value="是" size="large">是</el-radio>
            <el-radio value="否" size="large">否</el-radio>
          </el-radio-group>
        </div>
      </el-form-item>
      <el-form-item label="辖区" prop="district">
        <el-input v-model="carform.district" placeholder="请输入辖区" />
      </el-form-item>
      <el-form-item label="执业范围" prop="scope">
        <el-input v-model="carform.scope" placeholder="请输入执业范围" />
      </el-form-item>
      <el-form-item label="是否提出回避申请" prop="isApply">
        <div class="mb-2 ml-4">
          <el-radio-group v-model="carform.isApply">
            <el-radio value="是" size="large">是</el-radio>
            <el-radio value="否" size="large">否</el-radio>
          </el-radio-group>
        </div>
      </el-form-item>
      <el-form-item label="回避申请的具体情形">
        <el-input v-model="carform.content" placeholder="请输入回避申请的具体情形" />
      </el-form-item>
      <el-form-item label="备注" prop="notes">
        <el-input v-model="carform.notes" placeholder="请输入备注" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="carsubmitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 添加或修改移居对话框 -->
  <el-dialog :title="migtitle" v-model="migopen" width="600px" append-to-body>
    <el-form ref="migrateRef" :model="migform" :rules="rules" label-width="120px">
      <el-form-item label="亲属姓名" prop="name">
        <el-select
            v-model="migform.name"
            placeholder="亲属姓名"
            clearable >
          <el-option
              v-for="(item,index) in Qinname"
              :key="index"
              :label="item"
              :value="item"
              @click="infoClick(migform.name)"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="与本人关系" prop="relationship">
        <el-select
            v-model="migform.relationship"
            placeholder="与本人关系"
            clearable >
          <el-option
              v-for="item in type"
              :key="item.value"
              :label="item.label"
              :value="item.label"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="身份证号" prop="identity">
        <el-input v-model="migform.identity" placeholder="请输入身份证号" />
      </el-form-item>
      <el-form-item label="移居国家" prop="country">
        <el-input v-model="migform.country" placeholder="请输入移居国家" />
      </el-form-item>
      <el-form-item label="现住城市" prop="city">
        <el-input v-model="migform.city" placeholder="请输入现住城市" />
      </el-form-item>
      <el-form-item label="移居证件号码" prop="documentNum">
        <el-input v-model="migform.documentNum" placeholder="请输入移居证件号码" />
      </el-form-item>
      <el-form-item label="移居类别" prop="migrateType">
        <el-select
            v-model="migform.migrateType"
            placeholder="移居类别"
            clearable >
          <el-option
              v-for="item in migrateType"
              :key="item.value"
              :label="item.label"
              :value="item.label"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="移居日期" prop="migrateDate">
        <el-date-picker clearable
                        v-model="migform.migrateDate"
                        type="date"
                        value-format="YYYY-MM-DD"
                        placeholder="请选择移居日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="备注" prop="notes">
        <el-input v-model="migform.notes" placeholder="请输入备注" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="migsubmitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 添加或修改刑事责任对话框 -->
  <el-dialog :title="restitle" v-model="resopen" width="600px" append-to-body>
    <el-form ref="responsibilityRef" :model="resform" :rules="rules" label-width="120px">
      <el-form-item label="亲属姓名" prop="name">
        <el-select
            v-model="resform.name"
            placeholder="亲属姓名"
            clearable >
          <el-option
              v-for="(item,index) in Qinname"
              :key="index"
              :label="item"
              :value="item"
              @click="infoClick(resform.name)"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="与本人关系" prop="relationship">
        <el-select
            v-model="resform.relationship"
            placeholder="与本人关系"
            clearable >
          <el-option
              v-for="item in type"
              :key="item.value"
              :label="item.label"
              :value="item.label"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="身份证号" prop="identity">
        <el-input v-model="resform.identity" placeholder="请输入身份证号" />
      </el-form-item>
      <el-form-item label="被追究日期" prop="investigateDate">
        <el-date-picker clearable
                        v-model="resform.investigateDate"
                        type="date"
                        value-format="YYYY-MM-DD"
                        placeholder="请选择被追究日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="被追究原因" prop="investigateReason">
        <el-input v-model="resform.investigateReason" placeholder="请输入被追究原因" />
      </el-form-item>
      <el-form-item label="处理阶段" prop="processingStage">
        <el-select
            v-model="resform.processingStage"
            placeholder="处理阶段"
            clearable >
          <el-option
              v-for="item in protype"
              :key="item.value"
              :label="item.label"
              :value="item.label"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="处理结果" prop="processingResults">
        <el-input v-model="resform.processingResults" placeholder="请输入处理结果" />
      </el-form-item>
      <el-form-item label="备注" prop="notes">
        <el-input v-model="resform.notes" placeholder="请输入备注" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="ressubmitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import request from '@/utils/mine'
import {ref,reactive,onMounted} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import {ArrowRight,Edit,Delete,Plus} from "@element-plus/icons-vue";
const parents = ref([]);
const abroadList=ref([]);
const careerList=ref([]);
const migrateList=ref([]);
const responsibilityList=ref([]);
const title = ref("");
const abrtitle=ref("");
const cartitle=ref("");
const migtitle=ref("");
const restitle=ref("");
const open = ref(false)
const abropen = ref(false)
const caropen = ref(false)
const migopen = ref(false)
const resopen = ref(false)
const parentsTable = ref(true)
const abroadTable=ref(false)
const careerTable=ref(false);
const migrateTable=ref(false);
const responsibilityTable=ref(false);
const parbutton=ref(true)
const abrbutton=ref(false)
const carbutton=ref(false)
const migbutton=ref(false)
const resbutton=ref(false)
const userInfo = reactive({
  'username' :null
})
const Qinname =ref([])
/*const form=ref({
  id: null,
  number: 234/!*userInfo.username*!/,
  name: null,
  relationship: null,
  isLive: null,
  marriage: null,
  unit: null,
  duties: null,
  unitNature: null,
  isSenior: null,
  isAbroad: null,
  identity: null
})*/
function Cparents(){
  parentsTable.value=true
  abroadTable.value=false
  careerTable.value=false
  migrateTable.value=false
  responsibilityTable.value=false
  parbutton.value=true
  abrbutton.value=false
  carbutton.value=false
  migbutton.value=false
  resbutton.value=false
}
function Cabroad(){
  abroadTable.value=true
  parentsTable.value=false
  careerTable.value=false
  migrateTable.value=false
  responsibilityTable.value=false
  parbutton.value=false
  abrbutton.value=true
  carbutton.value=false
  migbutton.value=false
  resbutton.value=false
}
function Ccareer(){
  careerTable.value=true
  abroadTable.value=false
  parentsTable.value=false
  migrateTable.value=false
  responsibilityTable.value=false
  parbutton.value=false
  abrbutton.value=false
  carbutton.value=true
  migbutton.value=false
  resbutton.value=false
}
function Cmigrate(){
  migrateTable.value=true
  abroadTable.value=false
  parentsTable.value=false
  careerTable.value=false
  responsibilityTable.value=false
  parbutton.value=false
  abrbutton.value=false
  carbutton.value=false
  migbutton.value=true
  resbutton.value=false
}
function Ccriminal(){
  responsibilityTable.value=true
  abroadTable.value=false
  parentsTable.value=false
  careerTable.value=false
  migrateTable.value=false
  parbutton.value=false
  abrbutton.value=false
  carbutton.value=false
  migbutton.value=false
  resbutton.value=true
}
// 新增表单初始化数据
const formAddData={
  id: null,
  number:  userInfo.username,
  name: null,
  relationship: null,
  isLive: null,
  marriage: null,
  unit: null,
  duties: null,
  unitNature: null,
  isSenior: null,
  isAbroad: null,
  identity: null
}
// 新增表单绑定数据模型
const form = reactive({...formAddData})

const abrformAdd={
  id: null,
  number:userInfo.username,
  name: null,
  relationship: null,
  identity: null,
  country: null,
  workCity: null,
  work: null,
  duties: null,
  startingTime: null,
  endTime: null,
  notes: null
}
const abrform=reactive({...abrformAdd})

const carformAdd={
  id: null,
  number:userInfo.username,
  name: null,
  relationship: null,
  identity: null,
  duties: null,
  unit: null,
  isPartner: null,
  isDistrict: null,
  district: null,
  scope: null,
  isApply: null,
  content: null,
  notes: null
}
const carform=reactive({...carformAdd})

const migformAdd={
  id: null,
  number: userInfo.username,
  name: null,
  relationship: null,
  identity: null,
  country: null,
  city: null,
  documentNum: null,
  migrateType: null,
  migrateDate: null,
  notes: null
}
const migform=reactive({...migformAdd})

const resformAdd={
  id: null,
  number: userInfo.username,
  name: null,
  relationship: null,
  identity: null,
  investigateDate: null,
  investigateReason: null,
  processingStage: null,
  processingResults: null,
  notes: null
}
const resform=reactive({...resformAdd})

const rules=reactive({
  number: [
    { required: true, message: "工号不能为空", trigger: "blur" }
  ],
  name: [
    { required: true, message: "亲属姓名不能为空", trigger: "blur" }
  ],
  relationship: [
    { required: true, message: "与本人的关系不能为空", trigger: "change" }
  ],
  identity: [
    { required: true, message: "身份证号不能为空", trigger: "blur" }
  ],
  country: [
    { required: true, message: "所在国家不能为空", trigger: "blur" }
  ],
  workCity: [
    { required: true, message: "工作生活城市不能为空", trigger: "blur" }
  ],
  work: [
    { required: true, message: "工作不能为空", trigger: "blur" }
  ],
  startingTime: [
    { required: true, message: "起始日期不能为空", trigger: "blur" }
  ],
  endTime: [
    { required: true, message: "返回日期不能为空", trigger: "blur" }
  ],
  duties: [
    { required: true, message: "职务不能为空", trigger: "blur" }
  ],
  unit: [
    { required: true, message: "单位名称不能为空", trigger: "blur" }
  ],
  city: [
    { required: true, message: "现住城市不能为空", trigger: "blur" }
  ],
  documentNum: [
    { required: true, message: "移居证件号码不能为空", trigger: "blur" }
  ],
  migrateType: [
    { required: true, message: "移居类别不能为空", trigger: "change" }
  ],
  migrateDate: [
    { required: true, message: "移居日期不能为空", trigger: "blur" }
  ],
  investigateDate: [
    { required: true, message: "被追究日期不能为空", trigger: "blur" }
  ],
})
const type = [
  {label : '父亲' , value : 1}
  ,{label : '母亲' , value : 2}
  ,{label : '配偶' , value : 3}
  ,{label : '子女' , value : 4}
  ,{label : '子女配偶' , value : 5}
]
const protype = [
  {label : '立案侦查' , value : 1}
  ,{label : '审查起诉' , value : 2}
  ,{label : '刑事审判' , value : 3}
  ,{label : '刑罚执行' , value : 4}
  ,{label : '执行完毕' , value : 5}
  ,{label : '其他' , value : 6}
]
const marriageType=[
  {label : '已婚' , value : 1}
  ,{label : '未婚' , value : 2}
  ,{label : '丧偶' , value : 3}
  ,{label : '离婚' , value : 4}
  ,{label : '再婚' , value : 5}
  ,{label : '其他' , value : 6}
]
const migrateType = [
  {label : '外国国籍' , value : 1}
  ,{label : '永久居留资格' , value : 2}
  ,{label : '长期居留许可' , value : 3}
]
const unitNature=[
  {label : '党政机关' , value : 1}
  ,{label : '事业单位' , value : 2}
  ,{label : '国有企业' , value : 3}
  ,{label : '军队' , value : 4}
  ,{label : '学生' , value : 5}
  ,{label : '其他' , value : 6}
  ,{label : '个体工商户' , value : 7}
  ,{label : '私营企业' , value : 8}
  ,{label : '外商投资企业' , value : 9}
  ,{label : '境内从事生产经营活动的外国（地区）企业' , value : 10}
  ,{label : '外国（地区）企业常驻竟内代表机构' , value : 11}
  ,{label : '境外非政府组织境外内代表机构' , value : 12}
]
onMounted( () => {
  // 从SessionStorage取出数据
  let userstr = sessionStorage.getItem('loginUser')

  userInfo.username = JSON.parse(userstr).username

  getList()
  getAbroadList()
  getCareerList()
  getMigrateList()
  getresponsibilityList()
  //选择亲属姓名
  request({
    url: '/parents/get',
    method: 'GET',
    params: {number:JSON.parse(userstr).username}
  }).then(res => {
    Qinname.value = res.data; // 使用ref变量的值
    /*console.log(Qinname.value+"======================")*/
  })
});
//选择姓名自己填充信息
const infoClick = (row) => {
  console.log(row+"9999999999999999")
  request({
    url:'/parents/info',
    method:'GET',
    params:{name:row}
  }).then(res=>{
    abrform.relationship=res.data.relationship;
    carform.relationship=res.data.relationship;
    migform.relationship=res.data.relationship;
    resform.relationship=res.data.relationship;
    abrform.identity=res.data.identity;
    carform.identity=res.data.identity;
    migform.identity=res.data.identity;
    resform.identity=res.data.identity;
  })
}
/** 查询家庭主要成员列表 */
function getList() {
  request({
    url: '/parents/listBynum',
    method: 'get',
    params: {number:userInfo.username}
  }).then(response => {
    parents.value = response.data;
  });
}
/** 查询出国列表 */
function getAbroadList() {
  request({
    url: '/abroad/listBynum',
    method: 'get',
    params: {number:userInfo.username}
  }).then(response => {
    abroadList.value = response.data;
  });
}
/** 查询职业列表 */
function getCareerList(){
  request({
    url: '/career/listBynum',
    method: 'get',
    params: {number:userInfo.username}
  }).then(response => {
    careerList.value = response.data;
  });
}
/** 查询移居列表 */
function getMigrateList(){
  request({
    url: '/migrate/listBynum',
    method: 'get',
    params: {number:userInfo.username}
  }).then(response => {
    migrateList.value = response.data;
  });
}
/** 查询刑事责任列表 */
function getresponsibilityList(){
  request({
    url: '/criminal/listBynum',
    method: 'get',
    params: {number:userInfo.username}
  }).then(response => {
    responsibilityList.value = response.data;
  });
}
/** 新增按钮操作 */
function handleAdd() {
  Object.assign(form , formAddData)/* form类型reactive*/
  /*form.value=[]
  form.value.number=234*/
  open.value = true;
  title.value = "添加家庭主要成员";
}
function abrhandleAdd(){
  Object.assign(abrform,abrformAdd)
  abropen.value=true;
  abrtitle.value="添加出国人员"
}
function carhandleAdd(){
  Object.assign(carform,carformAdd)
  caropen.value=true;
  cartitle.value="添加亲属职业"
}
function mighandleAdd(){
  Object.assign(migform,migformAdd)
  migopen.value=true;
  migtitle.value="添加移居人员"
}
function reshandleAdd(){
  Object.assign(resform,resformAdd)
  resopen.value=true;
  restitle.value="添加刑事责任"
}
/** 修改按钮操作 */
const handleUpdate=(row)=> {
  open.value=true
  title.value = "修改家庭主要成员";
  request({
    url:'/parents/selectById',
    method:'GET',
    params:{
      id:row.id
    }
  }).then((req)=>{
    console.log(req.data+"____________")
    /*form.value=req.data*/
    form.id=req.data.id
    form.number=req.data.number
    form.name=req.data.name
    form.relationship=req.data.relationship
    form.isLive=req.data.isLive
    form.marriage=req.data.marriage
    form.duties=req.data.duties
    form.unitNature=req.data.unitNature
    form.isSenior=req.data.isSenior
    form.isAbroad=req.data.isAbroad
    form.identity=req.data.identity
  })
}
const AbrhandleUpdate=(row)=> {
  abropen.value=true
  abrtitle.value = "修改出国人员";
  request({
    url:'/abroad/selectById',
    method:'GET',
    params:{
      id:row.id
    }
  }).then((req)=>{
    console.log(req.data+"____________")
    /*form.value=req.data*/
    abrform.id=req.data.id
    abrform.number=req.data.number
    abrform.name=req.data.name
    abrform.relationship=req.data.relationship
    abrform.identity=req.data.identity
    abrform.country=req.data.country
    abrform.workCity=req.data.workCity
    abrform.work=req.data.work
    abrform.duties=req.data.duties
    abrform.startingTime=req.data.startingTime
    abrform.endTime=req.data.endTime
    abrform.notes=req.data.notes

  })
}
const CarhandleUpdate=(row)=> {
  caropen.value=true
  cartitle.value = "修改亲属职业";
  request({
    url:'/career/selectById',
    method:'GET',
    params:{
      id:row.id
    }
  }).then((req)=>{
    console.log(req.data+"____________")
    /*form.value=req.data*/
    carform.id=req.data.id
    carform.number=req.data.number
    carform.name=req.data.name
    carform.relationship=req.data.relationship
    carform.identity=req.data.identity
    carform.duties=req.data.duties
    carform.unit=req.data.unit
    carform.isPartner=req.data.isPartner
    carform.isDistrict=req.data.isDistrict
    carform.district=req.data.district
    carform.isApply=req.data.isApply
    carform.content=req.data.content
    carform.notes=req.data.notes

  })
}
const mighandleUpdate=(row)=> {
  migopen.value=true
  migtitle.value = "修改亲属职业";
  request({
    url:'/migrate/selectById',
    method:'GET',
    params:{
      id:row.id
    }
  }).then((req)=>{
    console.log(req.data+"____________")
    /*form.value=req.data*/
    migform.id=req.data.id
    migform.number=req.data.number
    migform.name=req.data.name
    migform.relationship=req.data.relationship
    migform.identity=req.data.identity
    migform.country=req.data.country
    migform.city=req.data.city
    migform.documentNum=req.data.documentNum
    migform.migrateType=req.data.migrateType
    migform.migrateDate=req.data.migrateDate
    migform.notes=req.data.notes

  })
}
const reshandleUpdate=(row)=> {
  resopen.value=true
  restitle.value = "修改刑事责任";
  request({
    url:'/criminal/selectById',
    method:'GET',
    params:{
      id:row.id
    }
  }).then((req)=>{
    console.log(req.data+"____________")
    /*form.value=req.data*/
    resform.id=req.data.id
    resform.number=req.data.number
    resform.name=req.data.name
    resform.relationship=req.data.relationship
    resform.identity=req.data.identity
    resform.investigateDate=req.data.investigateDate
    resform.investigateReason=req.data.investigateReason
    resform.processingStage=req.data.processingStage
    resform.processingResults=req.data.processingResults
    resform.notes=req.data.notes

  })
}
// 取消按钮
function cancel() {
  open.value = false;
  abropen.value=false;
  caropen.value=false;
  migopen.value=false;
  resopen.value=false;
}
/** 提交按钮 */
function submitForm() {
  if(form.id!=null) {
    request({
      url: '/parents/update',
      method: 'PUT',
      params: form
    }).then((req) => {
      if (200 == req.data.errorCode) {
        ElMessage({
          type: 'success',
          message: '修改成功',
        });
        open.value = false
        getList()
      } else {
        ElMessage({
          type: 'info',
          message: '修改失败',
        });
      }
    })
  }else{
    request({
      url: '/parents/insert',
      method: 'POST',
      params: form
    }).then((req) => {
      if (200 == req.data.errorCode) {
        ElMessage({
          type: 'success',
          message: '新增成功',
        });
        open.value = false
        getList()
      } else {
        ElMessage({
          type: 'info',
          message: '新增失败',
        });
      }
    })
  }
}
/** 提交按钮 */
function abrsubmitForm() {
  if(abrform.id!=null) {
    request({
      url: '/abroad/update',
      method: 'PUT',
      params: abrform
    }).then((req) => {
      if (200 == req.data.errorCode) {
        ElMessage({
          type: 'success',
          message: '修改成功',
        });
        abropen.value = false
        getAbroadList()
      } else {
        ElMessage({
          type: 'info',
          message: '修改失败',
        });
      }
    })
  }else{
    request({
      url: '/abroad/insert',
      method: 'POST',
      params: abrform
    }).then((req) => {
      if (200 == req.data.errorCode) {
        ElMessage({
          type: 'success',
          message: '新增成功',
        });
        abropen.value = false
        getAbroadList()
      } else {
        ElMessage({
          type: 'info',
          message: '新增失败',
        });
      }
    })
  }
}
/** 提交按钮 */
function carsubmitForm() {
  if(carform.id!=null) {
    request({
      url: '/career/update',
      method: 'PUT',
      params: carform
    }).then((req) => {
      if (200 == req.data.errorCode) {
        ElMessage({
          type: 'success',
          message: '修改成功',
        });
        caropen.value = false
        getCareerList()
      } else {
        ElMessage({
          type: 'info',
          message: '修改失败',
        });
      }
    })
  }else{
    request({
      url: '/career/insert',
      method: 'POST',
      params: carform
    }).then((req) => {
      if (200 == req.data.errorCode) {
        ElMessage({
          type: 'success',
          message: '新增成功',
        });
        caropen.value = false
        getCareerList()
      } else {
        ElMessage({
          type: 'info',
          message: '新增失败',
        });
      }
    })
  }
}
function migsubmitForm() {
  if(migform.id!=null) {
    request({
      url: '/migrate/update',
      method: 'PUT',
      params: migform
    }).then((req) => {
      if (200 == req.data.errorCode) {
        ElMessage({
          type: 'success',
          message: '修改成功',
        });
        migopen.value = false
        getMigrateList()
      } else {
        ElMessage({
          type: 'info',
          message: '修改失败',
        });
      }
    })
  }else{
    request({
      url: '/migrate/insert',
      method: 'POST',
      params: migform
    }).then((req) => {
      if (200 == req.data.errorCode) {
        ElMessage({
          type: 'success',
          message: '新增成功',
        });
        migopen.value = false
        getMigrateList()
      } else {
        ElMessage({
          type: 'info',
          message: '新增失败',
        });
      }
    })
  }
}
function ressubmitForm() {
  if(resform.id!=null) {
    request({
      url: '/criminal/update',
      method: 'PUT',
      params: resform
    }).then((req) => {
      if (200 == req.data.errorCode) {
        ElMessage({
          type: 'success',
          message: '修改成功',
        });
        resopen.value = false
        getresponsibilityList()
      } else {
        ElMessage({
          type: 'info',
          message: '修改失败',
        });
      }
    })
  }else{
    request({
      url: '/criminal/insert',
      method: 'POST',
      params: resform
    }).then((req) => {
      if (200 == req.data.errorCode) {
        ElMessage({
          type: 'success',
          message: '新增成功',
        });
        resopen.value = false
        getresponsibilityList()
      } else {
        ElMessage({
          type: 'info',
          message: '新增失败',
        });
      }
    })
  }
}

/** 删除按钮操作 */
function handleDelete(row) {
  ElMessageBox.confirm(
      '确认删除这个成员吗 ',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    request({
      url: '/parents/delete',
      method: 'DELETE',
      params: {
        id: row.id
      }
    }).then((req) => {
      if (200 == req.data.errorCode) {
        ElMessage({
          type: 'success',
          message: '删除成功',
        });
        open.value = false
        getList()
      }
    })
  }).catch(() => {
        ElMessage({
          type: 'info',
          message: '取消删除',
        });
  });
}
function AbrhandleDelete(row) {
  ElMessageBox.confirm(
      '确认删除这个成员吗 ',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    request({
      url: '/abroad/delete',
      method: 'DELETE',
      params: {
        id: row.id
      }
    }).then((req) => {
      if (200 == req.data.errorCode) {
        ElMessage({
          type: 'success',
          message: '删除成功',
        });
        abropen.value = false
        getAbroadList()
      }
    })
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '取消删除',
    });
  });
}
function carhandleDelete(row) {
  ElMessageBox.confirm(
      '确认删除这个成员吗 ',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    request({
      url: '/career/delete',
      method: 'DELETE',
      params: {
        id: row.id
      }
    }).then((req) => {
      if (200 == req.data.errorCode) {
        ElMessage({
          type: 'success',
          message: '删除成功',
        });
        caropen.value = false
        getCareerList()
      }
    })
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '取消删除',
    });
  });
}
function mighandleDelete(row) {
  ElMessageBox.confirm(
      '确认删除这个成员吗 ',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    request({
      url: '/migrate/delete',
      method: 'DELETE',
      params: {
        id: row.id
      }
    }).then((req) => {
      if (200 == req.data.errorCode) {
        ElMessage({
          type: 'success',
          message: '删除成功',
        });
        migopen.value = false
        getMigrateList()
      }
    })
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '取消删除',
    });
  });
}
function reshandleDelete(row) {
  ElMessageBox.confirm(
      '确认删除这个成员吗 ',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    request({
      url: '/criminal/delete',
      method: 'DELETE',
      params: {
        id: row.id
      }
    }).then((req) => {
      if (200 == req.data.errorCode) {
        ElMessage({
          type: 'success',
          message: '删除成功',
        });
        resopen.value = false
        getSelection()
      }
    })
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '取消删除',
    });
  });
}
</script>

<style scoped>
.el-breadcrumb{
  font-size: 18px;
  margin: 20px;
}
.el-link {
  margin-right: 8px;
}
.el-link .el-icon--right.el-icon {
  vertical-align: text-bottom;
}
.custom-link {
  color: #409EFF; /* 默认颜色 */
  text-decoration: none;
}

.custom-link:hover,
.custom-link:active,
.custom-link:focus {
  color: #333; /* 悬停、点击时的颜色 */
  text-decoration: underline;
}

.custom-link:visited {
  color: #42b983; /* 访问过链接的颜色 */
}

.custom-link:link {
  color: #409EFF; /* 未访问链接的默认颜色 */
}
</style>